{% if section.settings.layout == "horizontal" %}
{% assign maxHeight = "380px" %}
{% else %}
{% assign maxHeight = "790px" %}
{% endif %}
{% stylesheet %}
.block_image3 .block_image3_content{
  display: grid;
  grid-gap: 30px;
  margin: 0 auto;
}
.block_image3 .image-item {
  overflow: hidden;
  position: relative;
}
.block_image3 .image-item .default_image_number{
  font-size:18px;
  color:#999;
  position: absolute;
  right:20px;
  bottom:14px;
}
.block_image3 .image-item img {
  width: 100%;
  height: 100%;
  vertical-align: top;
  object-fit: cover;
}
.block_image3 .horizontal_left {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(2, auto);
}
.block_image3 .horizontal_left .image-item:nth-child(1) {
  grid-column: 1/3;
  grid-row: 1/3;
}
.block_image3 .horizontal_left .image-item:nth-child(2) {
  grid-column: 3/4;
  grid-row: 1/2;
}
.block_image3 .horizontal_left .image-item:nth-child(3) {
  grid-column: 3/4;
  grid-row: 2/3;
}
.block_image3 .horizontal {
  grid-template-columns: 1fr 1fr 1fr;
}
.block_image3 .horizontal .image-item img {
    width: 100%;
    height: auto;
}
.block_image3 .horizontal .image-item:nth-child(1) {
  grid-column: 1/2;
}
.block_image3 .horizontal .image-item:nth-child(2) {
  grid-column: 2/3;
}
.block_image3 .horizontal .image-item:nth-child(3) {
  grid-column: 3/4;
}
.block_image3 .horizontal_right {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(2, auto);
}
.block_image3 .horizontal_right .image-item:nth-child(1) {
  grid-column: 2/4;
  grid-row: 1/3;
}
.block_image3 .horizontal_right .image-item:nth-child(2) {
  grid-column: 1/2;
  grid-row: 1/2;
}
.block_image3 .horizontal_right .image-item:nth-child(3) {
  grid-column: 1/2;
  grid-row: 2/3;
}
@media screen and (min-width: 1200px) {

    .block_image3 .horizontal .image-item {
        min-height:calc(calc(var(--imageWidth) - 90px) / 3) !important;
    }
    
    .block_image3 .horizontal_left .image-item:first-child,.block_image3 .horizontal_right .image-item:first-child {
        height:calc(calc(var(--imageWidth) - 160px) / 3 * 2 + 30px) !important;
    }
    
    .block_image3 .horizontal_left .image-item,.block_image3 .horizontal_right .image-item{
        height:calc(calc(var(--imageWidth) - 160px) / 3 ) !important;
    }
   
}
@media screen and (max-width: 1200px) {
    .block_image3 .horizontal .image-item {
        height:auto;
    }

    .block_image3 .horizontal_left .image-item:first-child,.block_image3 .horizontal_right .image-item:first-child {
        height:calc(calc(100vw - 160px) / 3 * 2 + 30px) !important;
    }

    .block_image3 .horizontal_left .image-item,.block_image3 .horizontal_right .image-item{
        height:calc(calc(100vw - 160px) / 3 ) !important;
    }
}

@media screen and (max-width: 767px) {
  .block_image3 .horizontal_left {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto);
    grid-gap: 15px !important;
  }
  .block_image3 .image-item .default_image_number{
    right:8px;
    bottom:5px;
    font-size:14px;
  }
  .block_image3 .block_title{
     padding:0 15px;
  }
  .block_image3 .horizontal_left .image-item:nth-child(1) {
    grid-column: 1/3;
    grid-row: 1/2;
  }
  .block_image3 .horizontal_left .image-item:nth-child(2) {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .block_image3 .horizontal_left .image-item:nth-child(3) {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .block_image3 .horizontal {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto);
    grid-gap: 15px !important;
  }
  .block_image3 .horizontal .image-item:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .block_image3 .horizontal .image-item:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .block_image3 .horizontal .image-item:nth-child(3) {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .block_image3 .horizontal_right {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto);
    grid-gap: 15px !important;
  }
  .block_image3 .horizontal_right .image-item:nth-child(1) {
    grid-column: 1/3;
    grid-row: 2/3;
  }
  .block_image3 .horizontal_right .image-item:nth-child(2) {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .block_image3 .horizontal_right .image-item:nth-child(3) {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .block_image3 .horizontal .image-item {
        height:auto;
    }
    .block_image3 .horizontal_left .image-item:first-child,.block_image3 .horizontal_right .image-item:first-child {
        height:calc(calc(100vw - 40px)) !important;
    }

    .block_image3 .horizontal_left .image-item,.block_image3 .horizontal_right .image-item{
        height:calc(calc(100vw - 40px)  / 2) !important;
    }
}
{% endstylesheet %}
<div class="block_image3">
  {% if section.settings.title != '' or section.settings.detail != '' %}
  <div class="block_title">
      {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
      {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
  </div>
  {% endif %}
  <div class="container_wrapper">
    <div class="block_image3_content {{ section.settings.layout }}" style="--imageWidth: {% if section.settings.is_width_fill %}var(100vw - 100px){% else %}{{theme_config.global.general_layout_width}}px{% endif %}">
      <a class="image-item" href="{% if section.settings.image_one_link.url %}{{ section.settings.image_one_link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}"  data-tips="请选择图片链接">
        {% if section.settings.image_one.src %}
        <img data-src="{{ section.settings.image_one.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ section.settings.image_one.alt }}">
          {% else %}
          {% include default_block , {width:'100%',height : "100%" } %}
          <span class="default_image_number">Image-1</span>
          {% endif %}
      </a>
      <a class="image-item" href="{% if section.settings.image_two_link.url %}{{ section.settings.image_two_link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}"  data-tips="请选择图片链接">
        {% if section.settings.image_two.src %}
        <img  data-src="{{ section.settings.image_two.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ section.settings.image_two.alt }}">      
          {% else %}
          {% include default_block , {width:'100%',height:"100%"} %}
          <span class="default_image_number">Image-2</span>
          {% endif %}
      </a>
      <a class="image-item" href="{% if section.settings.image_three_link.url %}{{ section.settings.image_three_link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}"  data-tips="请选择图片链接">
        {% if section.settings.image_three.src %}
        <img data-src="{{ section.settings.image_three.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ section.settings.image_three.alt }}">      
          {% else %}
          {% include default_block , {width:'100%',height:"100%"} %}
          <span class="default_image_number">Image-3</span>
          {% endif %}
      </a>
    </div>
  </div>
</div>



{% schema %}
{
  "tag": "",
  "class": "block_image3",
  "is_global": false,
  "name": {
    "zh_CN": "多图3"
  },
  "max_blocks": "0",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题"
      },
      "id": "title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述"
      },
      "id": "detail"
    },
    {
      "type": "card_radio",
      "label": {
        "zh_CN": "版式选择"
      },
      "id": "layout",
      "option": [
     
        {
          "label": {
            "zh_CN": "单图居左"
          },
          "value": "horizontal_left",
          "icon": "shopyyicon-Three_left"
        },
        {
          "label": {
            "zh_CN": "单图居右"
          },
          "value": "horizontal_right",
          "icon": "shopyyicon-Three_right"
        }
      ],
      "default": "horizontal"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "图片1"
      }
    },
    {
      "type": "card_image",
      "label": {
        "zh_CN": "图片"
      },
      "default": {
        "src": "",
        "alt": ""
      },
        "info": {
        "zh_CN": "建议宽高比例为1:1，宽度1000px以上"
      },
      "id": "image_one"
    },
    {
      "type": "card_page_link",
      "label": {
        "zh_CN": "链接"
      },
      "default": {
        "type": "",
        "title": "",
        "url": ""
      },
      "id": "image_one_link"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "图片2"
      }
    },
    {
      "type": "card_image",
      "label": {
        "zh_CN": "图片"
      },
      "default": {
        "src": "",
        "alt": ""
      },
        "info": {
        "zh_CN": "建议宽高比例为1:1，宽度1000px以上"
      },
      "id": "image_two"
    },
    {
      "type": "card_page_link",
      "label": {
        "zh_CN": "链接"
      },
      "default": {
        "type": "",
        "title": "",
        "url": ""
      },
      "id": "image_two_link"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "图片3"
      }
    },
    {
      "type": "card_image",
      "label": {
        "zh_CN": "图片"
      },
      "default": {
        "src": "",
        "alt": ""
      },
        "info": {
        "zh_CN": "建议宽高比例为1:1，宽度1000px以上"
      },
      "id": "image_three"
    },
    {
      "type": "card_page_link",
      "label": {
        "zh_CN": "链接"
      },
      "default": {
        "type": "",
        "title": "",
        "url": ""
      },
      "id": "image_three_link"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "title":"Figure 3",
      "layout": "horizontal_left",
      "image_one": {
        "src": "",
        "alt": ""
      },
      "image_one_link": {
        "type": "",
        "title": "",
        "url": ""
      },
      "image_two": {
        "src": "",
        "alt": ""
      },
      "image_two_link": {
        "type": "",
        "title": "",
        "url": ""
      },
      "image_three": {
        "src": "",
        "alt": ""
      },
      "image_three_link": {
        "type": "",
        "title": "",
        "url": ""
      },
      "grid_gap": "30"
    },
    "blocks": []
  }
}
{% endschema %}